﻿<!-- 2017-12-4 14:24:14 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title></title>

    <!--第三方lib-->
    <script type="text/javascript" src="../../lib/include-lib.js?time=20201005" libpath="../../lib/"
            include="jquery,jquery.minicolors,font-awesome,bootstrap,layer,haoutil,jquery.range"></script>

    <link href="../../css/widget-win.css" rel="stylesheet" />
    <style>
        body {
            padding: 5px;
            text-align: center;
        }

        .talbe_style {
            padding: 5px;
            width: 95%;
            border: 0;
            font-size: 13px;
        }

            .talbe_style tr td {
                padding: 5px;
                text-align: left;
            }

        .nametd {
            width: 40%;
        }
    </style>
</head>
<body>
    <div class="btn-group" role="group">
        <button id="btnAddPoint" type="button" class="btn btn-primary">添加视域点</button>
        <button id="btnClear" type="button" class="btn btn-danger">清除</button>
    </div>

    <table class="talbe_style">
        <tr>
            <td class="nametd">方向(度)</td>
            <td>
                <input type="range" id="direction" min="0" max="360" step="1.0" value="1" title="方向">
            </td>
        </tr>
        <tr>
            <td class="nametd">翻转(度)</td>
            <td>
                <input type="range" id="pitch" min="-90" max="90" step="1.0" value="1" title="翻转">
            </td>
        </tr>
        <tr>
            <td class="nametd">距离(米)</td>
            <td>
                <input type="range" id="distance" min="1" max="5000" step="1.0" value="1" title="距离">
            </td>
        </tr>

        <tr>
            <td class="nametd">水平视场角(度)</td>
            <td>
                <input type="range" id="horizontalFov" min="1" max="120" step="1" value="1" title="水平视场角">
            </td>
        </tr>
        <tr>
            <td class="nametd">垂直视场角(度)</td>
            <td>
                <input type="range" id="verticalFov" min="1" max="90" step="1" value="1" title="垂直视场角">
            </td>
        </tr>

        <tr>
            <td class="nametd">可见区域颜色</td>
            <td>
                <input id="colorPicker1" value="rgba(0,255,0,0.5)" style="width:100%" />
            </td>
        </tr>
        <tr>
            <td class="nametd">不可见区域颜色</td>
            <td>
                <input id="colorPicker2" value="rgba(255,0,0,0.5)" style="width:100%" />
            </td>
        </tr>


    </table>

    <script>
        var thisWidget;

        //当前页面业务
        function initWidgetView(_thisWidget) {
            thisWidget = _thisWidget;

            if (thisWidget.config && thisWidget.config.style) {//适应不同样式
                $("body").addClass(thisWidget.config.style);
            }

            $('#colorPicker1').minicolors({
                position: "top right",
                control: "saturation",
                format: 'rgb',
                opacity: 0.5,
                change: function (hex, opacity) { 
                    thisWidget.updateViewshed3DColor('visibleAreaColor', hex);
                }
            });
            $('#colorPicker2').minicolors({
                position: "top right",
                control: "saturation",
                format: 'rgb',
                opacity: 0.5,
                change: function (hex, opacity) {
                    thisWidget.updateViewshed3DColor('hiddenAreaColor', hex); 
                }
            });

            //滑动条
            $("#direction").range({
                onChange: function (value, bfb) { 
                    thisWidget.updateViewshed3D('direction', value);
                }
            });
            $("#pitch").range({
                onChange: function (value, bfb) {
                    thisWidget.updateViewshed3D('pitch', value); 
                }
            });
            $("#distance").range({
                onChange: function (value, bfb) {
                    thisWidget.updateViewshed3D('distance', value);
                }
            });
            $("#horizontalFov").range({
                onChange: function (value, bfb) {
                    thisWidget.updateViewshed3D('horizontalFov', value);
                }
            });
            $("#verticalFov").range({
                onChange: function (value, bfb) {
                    thisWidget.updateViewshed3D('verticalFov', value);
                }
            });



            $("#btnAddPoint").click(function () {
                thisWidget.drawPoint();
            });
            $("#btnClear").click(function () {
                thisWidget.clearFX();
            }); 
        }

        function getVisibleAreaColor() {
            return $('#colorPicker1').val();
        }
        function getHiddenAreaColor() {
            return $('#colorPicker2').val();
        }
         
        function updateVal(viewshed3D) { 
            $("#direction").val(viewshed3D.direction).change();
            $("#pitch").val(viewshed3D.pitch).change();
            $("#distance").val(viewshed3D.distance).change();
            $("#horizontalFov").val(viewshed3D.horizontalFov).change();
            $("#verticalFov").val(viewshed3D.verticalFov).change();
        }

    </script>
</body>
</html>
